import React from 'react';
import {Form, Input, Button, Checkbox, Card, Spin} from 'antd';
import {UserOutlined, LockOutlined} from '@ant-design/icons';
import 'antd/dist/antd.css';
import './login.css';
import Logo from '../frame/ShowLoginImage.png';
import api from "../../api/api";

// const axios = require('axios');

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            render:false,
            loading:false,
            username: '',
            password: '',
            checked: '',
            admin: '',
            adminLevel: ''
        }
    }

    onFinish = (values) => {
        localStorage.setItem("account",values.username)
        localStorage.setItem("password",values.password)
        this.setState({
            loading:true,
            username: values.username,
            password: values.password,
            checked: values.checked
        }, ()=>{
            setTimeout(()=>{this.login()},1000)
        })
    };

    login(){
        if(!localStorage.getItem("token") || localStorage.getItem("token")==null || localStorage.getItem("token")==""){
            api.login(this.state.username,this.state.password);
        }
        console.log("sessionStorage",sessionStorage.getItem("getModule"))
        if(localStorage.getItem("token") && localStorage.getItem("token")!=null && localStorage.getItem("token")!=""){
            if(sessionStorage.getItem("routePath") && sessionStorage.getItem("routePath")!=null){
                this.props.history.push(sessionStorage.getItem("routePath"))
            }else this.props.history.push("/eip/index")
        }else {
            this.setState({
                loading:false
            })
        }

        // axios({
        //     method: 'get',
        //     url: 'http://localhost:8080/test',
        //     // data: {
        //     //     name: this.state.username,
        //     //     password: this.state.password
        //     // }
        // }).then(res => {
        //     console.log("res.data", res);
        //     this.props.history.push('/eip/index')
        // })
        //     .catch(function (error) {
        //         alert(error);
        //         // console.log(error);
        //     });
    }

    // async =(callback)=>{
    //     setTimeout(function(){
    //         //回调函数
    //         callback()
    //     },1000)
    // }

    render() {
        if(localStorage.getItem("token")){
            this.props.history.push(sessionStorage.getItem("routePath"))
        }
        console.log(this.props)
      return (
        <div>
            <Spin spinning={this.state.loading} delay={500}>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        checked: true,
                    }}
                    onValuesChange={this.onValuesChange}
                    onFinish={this.onFinish}
                    style={{margin: "150px auto"}}
                >
                    <img src={Logo} style={{marginBottom:"5rem"}}></img>
                    <Card title="EIP 登錄">
                        <Form.Item
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入账户!',
                                },
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="賬戶"/>
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码!',
                                },
                            ]}
                        >
                            <Input.Password prefix={<LockOutlined className="site-form-item-icon"/>} placeholder="密碼"/>
                            {/*<Input*/}
                            {/*    prefix={<LockOutlined className="site-form-item-icon"/>}*/}
                            {/*    type="password"*/}
                            {/*    placeholder="密碼"*/}
                            {/*/>*/}
                        </Form.Item>
                        {/*<Form.Item>*/}
                        {/*    <Form.Item name="checked" valuePropName="checked" noStyle="false">*/}
                        {/*        <Checkbox>記住密碼</Checkbox>*/}
                        {/*    </Form.Item>*/}
                        {/*</Form.Item>*/}
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登錄
                            </Button>
                            {/* 或 <a href="">立即註冊</a> */}
                        </Form.Item>
                    </Card>
                </Form>
            </Spin>
        </div>);
    }
}


export default Login;
